<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery.min.3.4.1.js"></script>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        // 1. 使用JavaScript 获取DOM 元素对象
        var div = document.querySelector('div');
        console.log(div);
        div.style.backgroundColor = 'purple';

        // // 2. 使用 jQuery 获取元素对象 (获取回来的是 通过 jQuery 包装过了的 jQuery对象)
        var jqDiv = $('div');
        console.log(jqDiv);
        /**********************************
         *  注意：jQuery 获取回来的对象不能直接使用 JavaScript中 DOM元素对象的属性和方法 需要转换
         *
         * */
        //jqDiv.style.backgroundColor = 'red';

        // 2.1 将jQuery 元素对象转换成  DOM元素对象
        // jqDiv[0].style.backgroundColor = 'red';
        jqDiv.get(0).style.backgroundColor = 'red';

        // 3. DOM元素对象 转换成 jQuery 元素对象
        var divBox = document.querySelector('div');
        // $(element)  这样可以 将 DOM元素对象转成 jQuery元素对象
        console.log($(divBox));
    </script>

</body>

</html>